<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Welcome to MyFinace web app</title>
        <h:outputStylesheet library="css" name="panel-grid-style.css"/>
    </h:head>

    <h:body>

        <h1>MyFinace web app</h1>

        <hr/>

        <h:form id="loginOrRegister">
            <h:panelGrid columns="2" columnClasses="outputLabel">
                <f:facet name="header">
                    <h:outputText value="Login or register"/> 
                </f:facet>

                <h:outputLabel value="Username : "/>
                <h:inputText id="username" value="#{indexPage.userAccount.username}"/>

                <h:outputLabel value="Password : "/>
                <h:inputSecret id="password" value="#{indexPage.userAccount.password}"/>

                <h:outputText  value="Re-enter password : "/>
                <h:inputSecret id="renterPassword" value="#{indexPage.renterPassword}"/>

                <f:facet name="footer">
                    <h:commandButton id="loginBtn" value="Login" action="#{indexPage.login()}"/>
                    <span style="display:inline-block; width: 177px;"/>
                    <h:commandButton id="registerBtn" value="Register" action="#{indexPage.register()}"/>
                </f:facet>
            </h:panelGrid>
        </h:form>

    </h:body>

</html>

